<template>
  <div class="evaluate" ref="evalua">
    <div class="evaluate-con">
      <div class="eva-top">
        <div class="eva-store">
          <h1>{{seller.name}}</h1>
          <div class="desc">
            <star :size="48" :score="seller.score"></star>
            <span class="eva-ratingCount">({{seller.ratingCount}})</span>
            <span class="eva-sellCount">月售{{seller.sellCount}}单</span>
          </div>
          <div class="xin" @click="dianxin($event)">
            <span class="iconfont icon-collection" :class="{'active':favorite}"></span>
            <p>{{favoriteText}}</p>
          </div>
        </div>
        <ul class="eva-ul">
          <li>
            <h2>起送价</h2>
            <p>
              <span class="price-title">{{seller.minPrice}}</span>
              <span class="price-yuan">元</span>
            </p>
          </li>
          <li>
            <h2>商家配送</h2>
            <p>
              <span class="price-title">{{seller.deliveryPrice}}</span>
              <span>元</span>
            </p>
          </li>
          <li>
            <h2>平均配送时间</h2>
            <p>
              <span class="price-title">{{seller.deliveryTime}}</span>
              <span>分钟</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="notice">
        <h1>公告与活动</h1>
        <p class="tice-text">{{seller.bulletin}}</p>
        <ul class="tice-ul">
          <li v-for="(item,index) in seller.supports" :key="index">
            <span class="jian" :class="classMap[seller.supports[index].type]"></span>
            <span class="text">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <div class="eva-swiper">
        <h1>商家实景</h1>
        <div class="swiper-container">
          <div class="swiper-wrapper" v-for="(img,index) in seller.pics" :key="index">
            <div class="swiper-slide">
              <img :src="img" width="120px" height="90px;">
            </div>
          </div>
        </div>
      </div>
      <div class="eva-bottom">
        <h1>商家信息</h1>
        <ul class="bot-ul" v-for="(bom,index) in seller.infos" :key="index">
          <li>
            <span>{{bom}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- <shorpcart></shorpcart> -->
  </div>
</template>

<script>
import star from "../star/star";
import BScroll from "better-scroll";
import Swiper from "swiper";
import shorpcart from "../shorpcart/shorpcart";

export default {
  props: {
    seller: {
      type: Object
    }
  },
  components: {
    star,
    shorpcart
  },
  data() {
    return {
      msg: "已收藏",
      favorite: false
    };
  },
  computed: {
    favoriteText() {
      return this.favorite ? "已收藏" : "收藏";
    }
  },
  created() {
    this.classMap = ["jian", "jian1", "jian2", "jian3", "jian4"];
  },
  mounted() {
    new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 30
    });
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.evalua, {
          click: true
        });
      } else {
        this.scroll.refresh();
      }
    });
  },
  updated(){
    new Swiper(".swiper-container", {
      slidesPerView: 3, //显示几个
      spaceBetween: 30  //slide之间的距离
    });
  },
  watch: {
    seller() {
      this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.evalua, {
          click: true
        });
      } else {
        this.scroll.refresh();
      }
    });
    }
  },
  methods: {
    //点击收藏
    dianxin(e) {
      if (!e._constructed) {
        return;
      }
      this.favorite = !this.favorite;
    }
  }
};
</script>

<style lang="scss">
.evaluate {
  position: absolute;
  top: 176px;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #f3f5f7;
  background: #f3f5f7;
  .evaluate-con {
    .eva-top {
      background: #fff;
      border-bottom: 1px solid #ccc;
      .eva-store {
        position: relative;
        padding: 18px;
        h1 {
          font-size: 14px;
          color: rgb(7, 17, 27);
          line-height: 14px;
        }
        .desc {
          margin-top: 8px;
          display: flex;
          justify-content: start;
          align-items: center;
          border-bottom: 1px solid #ccc;
          padding-bottom: 18px;
          .star-item {
            margin-right: 6px;
          }
          .eva-ratingCount,
          .eva-sellCount {
            font-size: 10px;
            color: rgb(77, 85, 93);
          }
          .eva-ratingCount {
            margin-left: 8px;
          }
          .eva-sellCount {
            margin-left: 12px;
          }
        }
        .xin {
          position: absolute;
          top: 18px;
          right: 18px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .icon-collection {
            display: inline-block;
            margin: 0 auto;
            font-size: 24px;
            color: #d4d6d9;
            line-height: 24px;
            &.active {
              color: rgb(240, 20, 20);
            }
          }
          p {
            font-size: 10px;
            color: rgb(77, 85, 93);
            line-height: 10px;
          }
        }
      }
      .eva-ul {
        padding-bottom: 18px;
        display: flex;
        justify-content: space-around;
        li {
          width: 33.3%;
          &:nth-child(1) {
            border-right: 1px solid #ccc;
          }
          &:nth-child(2) {
            border-right: 1px solid #ccc;
          }
          h2 {
            text-align: center;
            font-size: 10px;
            color: rgb(147, 153, 159);
            line-height: 10px;
          }
          p {
            text-align: center;
            margin-top: 4px;
            .price-title,
            .price-yuan {
              font-weight: 200;
              color: rgb(7, 17, 27);
              line-height: 24px;
            }
            .price-title {
              font-size: 24px;
            }
            .price-yuan {
              font-size: 10px;
            }
          }
        }
      }
    }
    .notice {
      padding: 18px 18px 0 18px;
      background: #fff;
      margin-top: 18px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      h1 {
        font-size: 14px;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }
      .tice-text {
        font-size: 12px;
        font-weight: 200;
        color: rgb(240, 20, 20);
        line-height: 24px;
        padding: 8px 12px 16px 12px;
      }
      .tice-ul {
        li {
          display: flex;
          align-items: center;
          border-top: 1px solid rgba(7, 17, 27, 0.1);
          padding: 16px 12px 16px 12px;
          .text {
            font-size: 12px;
            font-weight: 200;
            color: rgb(7, 17, 27);
            line-height: 16px;
          }
        }
      }
    }
    .eva-swiper {
      padding: 18px;
      background: #fff;
      margin-top: 18px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      h1 {
        font-size: 14px;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }
      .swiper-container {
        margin-top: 12px;
        display: flex;
        align-items: center;
        .swiper-wrapper {
          .swiper-slide {
            width: 120px;
            height: 90px;
          }
        }
      }
    }
    .eva-bottom {
      margin-top: 18px;
      padding: 18px 12px 18px 12px;
      background: #fff;
      border-top: 1px solid #ccc;
      h1 {
        font-size: 14px;
        color: rgb(7, 17, 27);
        line-height: 14px;
        margin-bottom: 12px;
      }
      .bot-ul {
        li {
          padding: 16px 12px 16px 12px;
          border-top: 1px solid rgba(7, 17, 27, 0.1);
          font-size: 12px;
          font-weight: 200;
          color: rgb(7, 17, 27);
          line-height: 16px;
        }
      }
    }
  }
}
</style>
